﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>音乐播放器</title>

<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="materialContainer">
	<div class="box">
		<div class="title">登录</div>
		<div class="input">
			<label for="username">用户名</label>
			<input type="text" name="username" id="username">
			<span class="spin"></span>
		</div>
		<div class="input">
			<label for="password">密码</label>
			<input type="password" name="password" id="password">
			<span class="spin"></span>
		</div>
		<div class="button login">
			<button>
				<button id="loginBtn">
					<span>登录</span>
					<i class="fa fa-check"></i>
				</button>
			</button>
		</div>
		<a href="javascript:" class="pass-forgot">忘记密码？</a>
	</div>

	<div class="overbox">
		<div class="material-button alt-2">
			<span class="shape"></span>
		</div>
		<div class="title">注册</div>
		<div class="input">
			<label for="regname">用户名</label>
			<input type="text" name="regname" id="regname">
			<span class="spin"></span>
		</div>
		<div class="input">
			<label for="regpass">密码</label>
			<input type="password" name="regpass" id="regpass">
			<span class="spin"></span>
		</div>
		<div class="input">
			<label for="reregpass">确认密码</label>
			<input type="password" name="reregpass" id="reregpass">
			<span class="spin"></span>
		</div>
		<div class="button">
			<button>
				<button id="registryBtn">
					<span>注册</span>
				</button>
			</button>
		</div>
	</div>

</div>

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/index.js"></script>

<script>
	var loginBtn = document.getElementById('loginBtn');
	loginBtn.addEventListener('click',login);
	var registryBtn = document.getElementById("registryBtn");
	registryBtn.addEventListener('click',registry);

	function login() {
		$.ajax({
			type: "post",
			url: "/user/login",
			data: {
				username: $("#username").val(),
				password: $("#password").val()
			},
			success: function (result) {
				if (result.status == 200) {
					window.location.href = "list.html";
				}else {
					alert(result.message);
				}
			}
		})
	}

	function registry() {
		$.ajax({
			type: 'post',
			url: '/user/registry',
			data: {
				regname: $('#regname').val(),
				regpassword: $('#regpass').val(),
				reregpassword: $('#reregpass').val()
			},
			success: function (result) {
				if (result.data == true) {
					alert("注册成功");
					window.location.href = "login.html";
				}else {
					alert(result.message);
				}
			}
		})
	}
</script>

</body>
</html>